<template>
  <div class="login-container" :class="{ 'is-loading': isLoading }">
    <!-- <img class="login-bg" src="http://yd.sjcmc.cn:16578/wp-content/uploads/2025/01/login-bg3-scaled.jpg" /> -->
    <div class="login-panel" :class="{ 'register-panel': !isLoginMode }" v-show="!isLoading">
      <!-- 左侧公告面板 -->
      <Announcement />
      <!-- 右侧登录/注册面板 -->
      <div class="auth-panel">
        <!-- 添加标题 -->
        <h1 class="auth-title">XIN计划</h1>

        <!-- 右上角图片 -->
        <!-- <div class="auth-image">
          <img src="http://yd.sjcmc.cn:16578/wp-content/uploads/2025/01/yiyou.jpg" alt="" />
        </div> -->

        <div class="tab-switcher">
          <button
            :class="['tab-btn', { active: isLoginMode }]"
            @click="switchMode('login')"
          >
            登录
          </button>
          <button
            :class="['tab-btn', { active: !isLoginMode }]"
            @click="switchMode('register')"
          >
            注册
          </button>
        </div>

        <!-- 登录表单 -->
        <el-form
          v-if="isLoginMode"
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="auth-form"
          @submit.prevent="handleLogin"
        >
          <el-form-item prop="email">
            <el-input
              v-model="loginForm.email"
              placeholder="请输入邮箱"
              :prefix-icon="User"
              @input="handleUsernameInput"
            >
              <template #append v-if="userList.length">
                <el-popover
                  placement="bottom"
                  :width="200"
                  trigger="click"
                  popper-class="history-popover"
                >
                  <template #reference>
                    <el-button>
                      <el-icon><ArrowDown /></el-icon>
                    </el-button>
                  </template>
                  <div class="history-users">
                    <div
                      v-for="item in userList"
                      :key="item.username"
                      class="history-item"
                      @click="userChange(item.username)"
                    >
                      {{ item.username }}
                    </div>
                  </div>
                </el-popover>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              show-password
            />
          </el-form-item>
          
          <!-- 添加忘记密码链接 -->
          <div class="forgot-password">
            <el-link type="primary" @click="showForgotPasswordDialog = true">忘记密码？</el-link>
          </div>

          <button class="submit-btn" type="submit" style="margin-top: 24px;" :disabled="loginLoading">
            <span class="now">{{ loginLoading ? '登录中...' : '启动!' }}</span>
            <span class="play">XIN计划</span>
          </button>
        </el-form>

        <!-- 注册表单 -->
        <div v-else class="auth-form register-form">
          <!-- 步骤指示器 -->
          <div class="step-indicator">
            <div class="step-item" :class="{ active: registerStep >= 1, completed: registerStep > 1 }">
              <div class="step-number">1</div>
              <div class="step-label">基本信息</div>
            </div>
            <div class="step-line" :class="{ active: registerStep > 1 }"></div>
            <div class="step-item" :class="{ active: registerStep >= 2, completed: registerStep > 2 }">
              <div class="step-number">2</div>
              <div class="step-label">获取令牌</div>
            </div>
            <div class="step-line" :class="{ active: registerStep > 2 }"></div>
            <div class="step-item" :class="{ active: registerStep >= 3 }">
              <div class="step-number">3</div>
              <div class="step-label">激活账号</div>
            </div>
          </div>

          <!-- 步骤内容 -->
          <el-form
            ref="registerFormRef"
            :model="registerForm"
            :rules="registerRules"
            class="step-content"
          >
            <!-- 步骤1: 基本信息 -->
            <div v-if="registerStep === 1" class="step-form">
              <div class="form-group">
                <el-form-item prop="email">
                  <el-input
                    v-model="registerForm.email"
                    placeholder="QQ邮箱 (例如: 12345678@qq.com)"
                    :prefix-icon="Message"
                    size="large"
                  />
                </el-form-item>
                
                <el-form-item prop="password">
                  <el-input
                    v-model="registerForm.password"
                    type="password"
                    placeholder="请输入密码 (6-10位)"
                    :prefix-icon="Lock"
                    show-password
                    size="large"
                  />
                </el-form-item>
              </div>
              
              <el-button
                type="primary"
                size="large"
                class="step-btn"
                @click="nextStep"
                :disabled="!registerForm.email || !registerForm.password"
              >
                下一步
              </el-button>
            </div>

            <!-- 步骤2: 获取令牌 -->
            <div v-else-if="registerStep === 2" class="step-form">
              <div class="step-info">
                <el-icon class="info-icon"><Key /></el-icon>
                <h3>获取注册令牌</h3>
                <p>点击下方按钮获取注册令牌，令牌将自动填入</p>
              </div>
              
              <div class="token-section">
                <el-form-item prop="token">
                  <el-input
                    :value="displayRegisterToken"
                    placeholder="注册令牌将自动填入"
                    :prefix-icon="Key"
                    readonly
                    size="large"
                    class="token-input"
                  />
                </el-form-item>
                
                <el-button
                  type="primary"
                  size="large"
                  @click="getRegistrationToken"
                  :loading="tokenLoading"
                  class="get-token-btn"
                >
                  {{ tokenLoading ? '获取中...' : '获取注册令牌' }}
                </el-button>
              </div>
              
              <div class="step-actions">
                <el-button size="large" @click="prevStep">上一步</el-button>
                <el-button
                  type="primary"
                  size="large"
                  @click="nextStep"
                  :disabled="!registerForm.token"
                >
                  下一步
                </el-button>
              </div>
            </div>

            <!-- 步骤3: 激活账号 -->
            <div v-else-if="registerStep === 3" class="step-form">
              <div class="activation-content">
                <div class="qr-info">
                  <h3>扫码激活账号</h3>
                  <p>使用注册邮箱对应的QQ扫码进群</p>
                </div>
                
                <div class="qr-section-horizontal">
                  <div class="qr-container">
                    <img :src="qrimage1" alt="注册二维码" class="qr-code" />
                  </div>
                  
                  <div class="qr-tips">
                    <div class="tip-item">
                      <span class="tip-number">1</span>
                      <span>扫码进入QQ群</span>
                    </div>
                    <div class="tip-item">
                      <span class="tip-number">2</span>
                      <span>发送令牌: {{ registerForm.token.substring(0, 4) }}</span>
                    </div>
                    <div class="tip-item">
                      <span class="tip-number">3</span>
                      <span>等待激活完成</span>
                    </div>
                  </div>
                </div>
                
                <!-- <div class="agreement-section"> -->
                  <el-form-item prop="agreePrivacy">
                    <el-checkbox v-model="registerForm.agreePrivacy" size="large">
                      我已阅读并同意
                      <a href="/url/ua" target="_blank" @click.stop>用户隐私协议</a>
                    </el-checkbox>
                  </el-form-item>
                <!-- </div> -->
              </div>
              
              <div class="step-actions">
                <el-button size="large" @click="prevStep">上一步</el-button>
                <el-button
                  type="primary"
                  size="large"
                  @click="handleRegister"
                  :disabled="!registerForm.agreePrivacy || isLoading"
                  :loading="isLoading"
                >
                  {{ isLoading ? '注册中...' : '完成注册' }}
                </el-button>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div v-if="isLoading" class="loading-indicator">Loading...</div>
  </div>
  <!-- 忘记密码对话框 -->
  <el-dialog
    v-model="showForgotPasswordDialog"
    title="忘记密码"
    width="400px"
    :close-on-click-modal="false"
    class="forgot-password-dialog"
  >
    <el-form
      ref="forgotPasswordFormRef"
      :model="forgotPasswordForm"
      :rules="forgotPasswordRules"
      label-width="80px">
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="forgotPasswordForm.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input v-model="forgotPasswordForm.password" type="password" show-password placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item label="令牌" prop="token">
        <div class="token-input-group">
          <el-input
            :value="displayForgotPasswordToken"
            @input="(val) => forgotPasswordForm.token = val"
            placeholder="请输入重置密码令牌"
            :prefix-icon="Key"
            readonly
          >
          </el-input>
          <el-button
            type="primary"
            @click="getForgotPasswordToken"
            :loading="resetTokenLoading"
            :disabled="!forgotPasswordForm.email || !forgotPasswordForm.password"
            class="get-token-btn"
          >
            获取重置令牌
          </el-button>
        </div>
      </el-form-item>
      <transition name="fade">
        <div v-if="isValidForgotPasswordQQEmail && forgotPasswordForm.token" class="qrcode-container">
          <img :src="qrimage1" alt="重置密码二维码" class="register-qrcode" />
          <p class="qrcode-tip">扫码进群，激活后才可以修改!</p>
          <p class="qrcode-tip">入群的QQ需和邮箱为同一账号</p>
          <p class="qrcode-tip">加群发送令牌即可完成激活</p>
          <p class="qrcode-tip">再点击确认重置即可修改密码</p>
        </div>
      </transition>
    </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="showForgotPasswordDialog = false">取消</el-button>
      <el-button 
        type="primary" 
        @click="handleResetPassword" 
        :loading="resetLoading"
        :disabled="!forgotPasswordForm.token"
      >
        确认重置
      </el-button>
    </span>
  </template>
</el-dialog>
</template>

<script setup>
// 公告组件
import Announcement from "./Announcement.vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useSystemStore } from "@/stores";
import { ref, reactive, watch, onMounted, onUnmounted, nextTick, computed } from 'vue';
import { sendCaptcha, register, login, updatePassword, forgotPassword, generateRegisterToken } from '@/api/user';
import { User, Lock, Bell, Message, ArrowDown, Key, Check } from "@element-plus/icons-vue";
import ajax from '@/api/ajax'

// 初始化路由和store
const router = useRouter();
const systemStore = useSystemStore();

// 控制登录/注册模式切换
const isLoginMode = ref(true);
const isLoading = ref(false);

// 注册步骤控制
const registerStep = ref(1);

// 表单引用
const loginFormRef = ref(null);
const registerFormRef = ref(null);

// 本地缓存用户信息
const userList = ref([]);

// 控制用户列表显示
const showUserList = ref(false);
const qrimage1 = ref('/go/check/image')



// 验证码相关
const countDown = ref(0);
const isClick = ref(true);
const emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
let timer = null;  // 将timer提升到组件作用域
let debounceTimer = null; // 防抖定时器

// 在 <script setup> 的 refs 和 reactive 对象部分添加
const graphCaptchaImg = ref('')
const graphCaptchaUuid = ref('')

// 添加计算属性检查是否输入了有效的QQ邮箱
const isValidQQEmail = computed(() => {
  // 检查是否是QQ邮箱格式
  const qqEmailPattern = /^[1-9][0-9]{4,}@qq\.com$/i;
  return qqEmailPattern.test(registerForm.email);
});

const isValidForgotPasswordQQEmail = computed(() => {
  // 检查是否是QQ邮箱格式
  const qqEmailPattern = /^[1-9][0-9]{4,}@qq\.com$/i;
  return qqEmailPattern.test(forgotPasswordForm.email);
});



// 检查是否是QQ邮箱的函数
const isQQEmail = (email) => {
  const qqEmailPattern = /^[1-9][0-9]{4,}@qq\.com$/i;
  return qqEmailPattern.test(email);
};

// 登录表单
const loginForm = reactive({
  email: "",
  password: "",
  remember: false,
});

// 注册表单
const registerForm = reactive({
  email: "",
  password: "",
  confirmPassword: '',
  captcha: "",
  graphCaptcha: "", // 添加图形验证码字段
  token: "", // 添加注册令牌字段
  remember: false,
  agreePrivacy: false, // 添加同意隐私协议字段
});

// 计算属性：显示令牌的前4位，其余用*代替
const displayRegisterToken = computed(() => {
  if (!registerForm.token) return '';
  return registerForm.token.substring(0, 4);
});

// 添加token相关状态
const tokenLoading = ref(false);

// 添加按钮控制状态
const canSendCode = ref(false);

// 在定义了isQQEmail后，再设置watch
watch(() => registerForm.email, (newVal) => {
  canSendCode.value = isQQEmail(newVal);
}, { immediate: true });

// 登录表单验证规则
const loginRules = reactive({
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
  ]
});

// 注册表单验证规则
const registerRules = reactive({
  username: [
    { required: true, message: "请输入账号" },
    { min: 3, max: 9, message: "长度在 3 到 9 个字符"},
  ],
  email: [
    { required: true, message: '请输入QQ邮箱'},
    { 
      validator: (rule, value, callback) => {
        if (value && !isQQEmail(value)) {
          callback(new Error('请使用全数字的QQ邮箱注册'));
        } else {
          callback();
        }
      }, 
    }
  ],
  captcha: [
    {
      required: true,
      message: "验证码不能为空",
    },
  ],
  password: [
    { required: true, message: "请输入密码" },
    { min: 6, max: 10, message: "密码不能超过10位。", },
  ],
  token: [ // 添加token验证规则
    { required: true, message: '请输入注册令牌', trigger: 'blur' },
    { min: 1, message: '注册令牌不能为空', trigger: 'blur' }
  ],
  agreePrivacy: [ // 添加隐私协议验证规则
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请阅读并同意用户隐私协议'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ],
  graphCaptcha: [
    { required: true, message: '请输入图形验证码' },
    { pattern: /^[A-Za-z0-9]{4}$/, message: '验证码必须是4位字母或数字'}
  ]
});

// 在组件挂载时检查本地存储
onMounted(() => {
  const savedCredentials = JSON.parse(
    localStorage.getItem("userCredentials") || "[]"
  );
  if (savedCredentials.length) {
    userList.value = savedCredentials;
    loginForm.username = userList.value[0].username;
    loginForm.password = userList.value[0].password;
    loginForm.remember = true;
  }
  // if (!isLoginMode.value) {
  //   getGraphCaptcha()
  // }
});
// 切换用户
const userChange = (value) => {
  const user = userList.value.find((item) => item.username == value);
  if (user) {
    loginForm.username = user.username;
    loginForm.password = user.password;
    loginForm.remember = true;
  } else {
    loginForm.password = "";
  }
};

// 处理用户名输入
const handleUsernameInput = (value) => {
  // 如果输入的用户名存在于历史记录中，自动填充密码
  const user = userList.value.find((item) => item.username === value);
  if (user) {
    loginForm.password = user.password;
    loginForm.remember = true;
  }
};

// 防抖函数 - 将此函数移到前面
const debounce = (fn, delay = 500) => {
  return (...args) => {
    if (debounceTimer) clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

// 验证码发送函数
// const sendVerificationCode = async (email, scene, code) => {
//   try {
//     const res = await sendCaptcha({
//       email: email,
//       scene: scene,
//       code: code,
//       uuid: graphCaptchaUuid.value
//     });
    
//     if (res.code === 200) {
//       ElMessage.success('验证码已发送,请查看邮箱或垃圾邮件');
//       return true;
//     } else {
//       ElMessage.error(res.msg || '发送验证码失败');
      
//       // 根据场景刷新不同的图形验证码
//       if (scene === 'register') {
//         // getGraphCaptcha(); // 刷新注册的图形验证码
//         // registerForm.graphCaptcha = ''; // 清空输入框
//       } else if (scene === 'update' || scene === 'reset') {
//         getResetGraphCaptcha(); // 刷新重置密码的图形验证码
//         forgotPasswordForm.graphCaptcha = ''; // 清空输入框
//       }
      
//       return false;
//     }
//   } catch (error) {
//     console.error('发送验证码失败:', error);
//     ElMessage.error('发送验证码失败，请稍后重试');
//     return false;
//   }
// };

// 注册验证码获取的核心函数
// const getCodeCore = async () => {
//   if (!registerForm.email) {
//     ElMessage.error('请输入邮箱');
//     return;
//   }
  
//   if (!isQQEmail(registerForm.email)) {
//     ElMessage.error('请使用QQ邮箱进行注册');
//     return;
//   }
  
//   // 检查图形验证码是否已输入
//   if (!registerForm.graphCaptcha) {
//     ElMessage.error('请先输入图形验证码');
//     return;
//   }
  
//   if (countDown.value > 0) return;
  
//   // 1. 立即开始倒计时
//   isClick.value = true;
//   countDown.value = 60;
//   let timer = setInterval(() => {
//     countDown.value--;
//     if (countDown.value <= 0) {
//       clearInterval(timer);
//     }
//   }, 1000);
  
//   // 2. 发送请求，增加try-catch确保异常情况也能恢复状态
//   try {
//     const res = await sendCaptcha({
//       email: registerForm.email,
//       scene: 'register',
//       code: registerForm.graphCaptcha,
//       uuid: graphCaptchaUuid.value
//     });
    
//     // 3. 判断响应状态
//     if (res.code === 200) {
//       // 成功，显示提示，继续倒计时
//       ElMessage.success('验证码已发送,请查看邮箱或垃圾邮件');
//     } else {
//       // 失败，恢复按钮初始状态
//       ElMessage.error(res.msg || '发送验证码失败');
//       resetRegistrationCodeState(timer);
//     }
//   } catch (error) {
//     console.error('发送验证码出错:', error);
//     ElMessage.error('发送验证码失败，请稍后重试');
//     resetRegistrationCodeState(timer);
//   }
// };

// 单独提取重置注册表单验证码状态的函数
// const resetRegistrationCodeState = (timer) => {
//   // 刷新图形验证码
//   // getGraphCaptcha();
//   registerForm.graphCaptcha = '';
//   // 恢复按钮状态
//   countDown.value = 0;
//   isClick.value = false;
//   // 清除定时器
//   if (timer) clearInterval(timer);
// };

// 使用防抖包装验证码获取函数
// const getCode = debounce(getCodeCore, 300);

// 添加登录按钮状态变量
const loginLoading = ref(false);

// 原始登录处理函数
const performLogin = async () => {
  if (!loginFormRef.value) return;
  
  if (loginLoading.value) return; // 防止重复提交
  loginLoading.value = true;
  
  try {
    await loginFormRef.value.validate(async (valid, fields) => {
      if (valid) {
        try {
          const res = await login({
            email: loginForm.email,
            password: loginForm.password
          });
          
          if (res.code === 200) {
            // 获取 systemStore
            const systemStore = useSystemStore();
            
            // 设置 token
            systemStore.setToken(res.token);
            localStorage.setItem('token', res.token);
            
            // 设置权限数组 - 现在只依赖这个
            systemStore.setPermissions(res.permissions || []);
            
            localStorage.setItem('seer_session', res.session);
            localStorage.setItem('isRead', true);
            
            ElMessage.success('登录成功');
            
            // 生成动态路由
            await systemStore.generateRoutes();
            
            // 计算重定向的URL
            let redirectPath = router.currentRoute.value.query.redirect || '/'
            
            // 确保重定向URL是相对路径
            if (redirectPath.startsWith('http')) {
              const url = new URL(redirectPath)
              redirectPath = url.pathname + url.search + url.hash
            }
            
            // 清除URL中的login部分
            window.history.replaceState(null, '', '/')
            
            // 然后导航到目标路径
            setTimeout(() => {
              router.replace(redirectPath)
            }, 10)
          } else {
            ElMessage.error(res.msg || '登录失败');
          }
        } catch (error) {
          console.error('登录请求失败:', error);
          ElMessage.error('登录失败：' + error.message);
        }
      }
    });
  } finally {
    loginLoading.value = false;
  }
};

// 使用防抖包装的登录处理函数
const handleLogin = debounce(performLogin, 300);

// 组件卸载时清理定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  if (debounceTimer) {
    clearTimeout(debounceTimer)
    debounceTimer = null
  }
})

// 原始图形验证码获取函数
// const fetchGraphCaptcha = async () => {
//   try {
//     const response = await ajax({
//       url: '/captcha/graph',
//       method: 'get'
//     })
    
//     if (response.code === 200) {
//       // 确保Base64有正确的前缀
//       let imgData = response.data.img;
//       if (!imgData.startsWith('data:image')) {
//         imgData = 'data:image/png;base64,' + imgData;
//       }
//       graphCaptchaImg.value = imgData;
//       graphCaptchaUuid.value = response.data.uuid;
//       console.log(graphCaptchaUuid.value);
      
//     } else {
//       ElMessage.error(response.msg || '获取图形验证码失败')
//     }
//   } catch (error) {
//     console.error('获取图形验证码失败:', error)
//     ElMessage.error('获取图形验证码失败，请稍后重试')
//   }
// };

// 使用防抖包装的图形验证码获取函数
// const getGraphCaptcha = debounce(fetchGraphCaptcha, 300);

// 修改切换登录/注册模式的函数
const switchMode = (mode) => {
  isLoginMode.value = mode === 'login';
  // 重置注册步骤
  if (mode === 'register') {
    registerStep.value = 1;
  }
  // 清空表单
  if (mode === 'login') {
    Object.assign(loginForm, {
      email: "",
      password: "",
      remember: false,
    });
  } else {
    Object.assign(registerForm, {
      email: "",
      password: "",
      confirmPassword: '',
      captcha: "",
      graphCaptcha: "",
      token: "",
      remember: false,
      agreePrivacy: false,
    });
  }
};

// 步骤切换方法
const nextStep = () => {
  if (registerStep.value < 3) {
    registerStep.value++;
  }
};

const prevStep = () => {
  if (registerStep.value > 1) {
    registerStep.value--;
  }
};  

// 添加控制验证消息显示的状态
// const showValidateMessage = ref(false);

// 获取注册令牌函数
const getRegistrationToken = async () => {
  if (!registerForm.email || !registerForm.password) {
    ElMessage.error('请先输入邮箱和密码');
    return;
  }
  
  if (!isQQEmail(registerForm.email)) {
    ElMessage.error('请使用全数字的QQ邮箱');
    return;
  }
  
  try {
    tokenLoading.value = true;
    // 调用后端API获取注册令牌
    const res = await generateRegisterToken({
      email: registerForm.email,
      password: registerForm.password
    });
    
    if (res.code === 200) {
      registerForm.token = res.token;
      ElMessage.success('注册令牌获取成功，请扫码进群激活后再注册');
    } else {
      ElMessage.error(res.msg || '获取注册令牌失败');
    }
  } catch (error) {
    console.error('获取注册令牌失败:', error);
    ElMessage.error('获取注册令牌失败，请稍后重试');
  } finally {
    tokenLoading.value = false;
  }
};

// 处理注册函数
const handleRegister = async () => {
  if (!registerFormRef.value) return;
  // 使用 Element Plus 的 validate 方法进行校验
  await registerFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      // 只有在表单验证通过（包括 agreePrivacy）时才执行注册逻辑
      try {
        isLoading.value = true;
        const res = await register({
          email: registerForm.email,
          password: registerForm.password,
          token: registerForm.token // 添加token参数
        });
        if (res.code === 200) {
          ElMessage.success('注册成功');
          isLoginMode.value = true; // 切换到登录模式
          // 清空表单
          registerForm.email = '';
          registerForm.password = '';
          registerForm.token = '';
          registerForm.agreePrivacy = false;
        } else {
          ElMessage.error(res.msg || '注册失败');
        }
      } catch (error) {
        console.error('注册失败:', error);
        ElMessage.error(error.msg || '注册失败，请稍后重试');
      } finally {
        isLoading.value = false;
      }
    } else {
      // 验证失败时，Element Plus 会自动显示对应字段的错误信息
      // 无需在此处添加额外的 ElMessage.warning
      console.log("验证失败", fields);
    }
  });
};

// 忘记密码相关
const showForgotPasswordDialog = ref(false)
const forgotPasswordFormRef = ref(null)
const resetLoading = ref(false)
const resetCountdown = ref(0)
const canSendResetCode = ref(true)
const resetTokenLoading = ref(false)

const forgotPasswordForm = reactive({
  email: '',
  password: '',
  token: '',
})

// 计算属性：显示忘记密码令牌的前4位，其余用*代替
const displayForgotPasswordToken = computed(() => {
  if (!forgotPasswordForm.token) return '';
  return forgotPasswordForm.token.substring(0, 4);
});

const forgotPasswordRules = {
  email: [
    { required: true, message: '请输入QQ邮箱', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (value && !isQQEmail(value)) {
          callback(new Error('请使用QQ邮箱找回密码'));
        } else {
          callback();
        }
      }, 
      trigger: 'blur' 
    }
  ],
  password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  token: [
    { required: true, message: '请输入重置密码令牌', trigger: 'blur' }
  ]
}

// 忘记密码验证码发送的核心函数
const sendResetCodeCore = async () => {
  if (!forgotPasswordForm.email) {
    ElMessage.error('请输入邮箱');
    return;
  }
  
  // 检查QQ邮箱格式
  if (!isQQEmail(forgotPasswordForm.email)) {
    ElMessage.error('请使用QQ邮箱找回密码');
    return;
  }
  
  // 检查图形验证码是否已输入
  if (!forgotPasswordForm.graphCaptcha) {
    ElMessage.error('请先输入图形验证码');
    return;
  }
  
  if (resetCountdown.value > 0) return;
  
  // 记录初始状态以便恢复
  const canSendResetCodeOriginal = canSendResetCode.value;
  canSendResetCode.value = false;
  resetCountdown.value = 60;
  let resetTimer = setInterval(() => {
    resetCountdown.value--;
    if (resetCountdown.value <= 0) {
      clearInterval(resetTimer);
      canSendResetCode.value = true;
    }
  }, 1000);
  
  // 添加try-catch确保异常处理
  try {
    const res = await sendCaptcha({
      email: forgotPasswordForm.email,
      scene: 'update',
      code: forgotPasswordForm.graphCaptcha,
      uuid: graphCaptchaUuid.value
    });
    
    if (res.code === 200) {
      ElMessage.success('验证码已发送,请查看邮箱或垃圾邮件');
    } else {
      ElMessage.error(res.msg || '发送验证码失败');
      resetResetCodeState(resetTimer, canSendResetCodeOriginal);
    }
  } catch (error) {
    console.error('发送重置密码验证码出错:', error);
    ElMessage.error('发送验证码失败，请稍后重试');
    resetResetCodeState(resetTimer, canSendResetCodeOriginal);
  }
};

// 单独提取重置忘记密码表单验证码状态的函数
const resetResetCodeState = (timer, originalState) => {
  // 刷新图形验证码
  getResetGraphCaptcha();
  forgotPasswordForm.graphCaptcha = '';
  // 恢复按钮状态
  resetCountdown.value = 0;
  canSendResetCode.value = originalState;
  // 清除定时器
  if (timer) clearInterval(timer);
};

// 使用防抖包装忘记密码验证码发送函数
// const sendResetCode = debounce(sendResetCodeCore, 300);

// 获取忘记密码令牌函数
const getForgotPasswordToken = async () => {
  if (!forgotPasswordForm.email || !forgotPasswordForm.password) {
    ElMessage.error('请先输入邮箱和新密码');
    return;
  }
  
  if (!isQQEmail(forgotPasswordForm.email)) {
    ElMessage.error('请使用全数字的QQ邮箱');
    return;
  }
  
  try {
    resetTokenLoading.value = true;
    // 调用统一的令牌生成接口
    const res = await generateRegisterToken({
      email: forgotPasswordForm.email,
      password: forgotPasswordForm.password
    });
    
    if (res.code === 200) {
      forgotPasswordForm.token = res.token;
      ElMessage.success('重置密码令牌获取成功，请扫码进群激活后再重置密码');
    } else {
      ElMessage.error(res.msg || '获取重置密码令牌失败');
    }
  } catch (error) {
    console.error('获取重置密码令牌失败:', error);
    ElMessage.error('获取重置密码令牌失败，请稍后重试');
  } finally {
    resetTokenLoading.value = false;
  }
};

// 重置密码
const handleResetPassword = async () => {
  if (!forgotPasswordFormRef.value) return
  
  await forgotPasswordFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      resetLoading.value = true
      try {
        const json = {
          email: forgotPasswordForm.email,
          password: forgotPasswordForm.password,
          token: forgotPasswordForm.token
        }
        const res = await forgotPassword(json)
        if (res.code === 200) {
          ElMessage.success('密码重置成功，请使用新密码登录')
          showForgotPasswordDialog.value = false
          // 重置表单
          forgotPasswordForm.email = ''
          forgotPasswordForm.password = ''
          forgotPasswordForm.token = ''
        } else {
          ElMessage.error(res.msg || '重置失败')
        }
      } catch (error) {
        console.error('重置密码失败:', error)
        ElMessage.error('重置失败')
      } finally {
        resetLoading.value = false
      }
    }
  })
}

// 添加忘记密码模式的图形验证码变量
const resetGraphCaptchaImg = ref('')

// 显示忘记密码对话框时获取图形验证码
// watch(showForgotPasswordDialog, (newVal) => {
//   if (newVal) {
//     getResetGraphCaptcha();
//   }
// });

// 忘记密码图形验证码获取函数
// const getResetGraphCaptcha = async () => {
//   try {
//     const response = await ajax({
//       url: '/captcha/graph',
//       method: 'get'
//     })
    
//     if (response.code === 200) {
//       // 确保Base64有正确的前缀
//       let imgData = response.data.img;
//       if (!imgData.startsWith('data:image')) {
//         imgData = 'data:image/png;base64,' + imgData;
//       }
//       resetGraphCaptchaImg.value = imgData;
//       graphCaptchaUuid.value = response.data.uuid;
//     } else {
//       ElMessage.error(response.msg || '获取图形验证码失败')
//     }
//   } catch (error) {
//     console.error('获取图形验证码失败:', error)
//     ElMessage.error('获取图形验证码失败，请稍后重试')
//   }
// };
</script>

<style lang="scss" scoped>
.login-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;

  .login-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    filter: blur(5px);
    z-index: 0;
  }

  .login-panel {
    position: relative;
    display: flex;
    width: 800px;
    height: 500px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 1;
    animation: fadeInUp 0.6s ease both;
    transition: height 0.3s ease, max-height 0.3s ease;

    .auth-panel {
      flex: 1;
      padding: 3rem 3.5rem;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      overflow: visible;

      .auth-title {
        position: absolute;
        top: 1rem;
        font-size: 2.2rem;
        font-weight: 700;
        color: #333;
        margin: 0;
        line-height: 100px;
        z-index: 1;
        letter-spacing: 2px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      }

      .auth-image {
        position: absolute;
        top: 10px;
        right: 20px;
        padding: 0;
        height: 80px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        transform: rotateY(180deg);
        z-index: 10;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          animation: bounce 4s ease-in-out infinite;

          &:hover {
            animation-play-state: paused;
          }
        }
      }

      .tab-switcher {
        margin-top: 100px;
        margin-bottom: 2.5rem;
        display: flex;
        gap: 3rem;

        .tab-btn {
          padding: 0.5rem 1rem;
          border: none;
          background: none;
          color: #999;
          cursor: pointer;
          font-size: 1.2rem;
          font-weight: 500;
          transition: all 0.3s ease;

          &.active {
            color: #1890ff;
            border-bottom: 2px solid #1890ff;
            font-weight: 600;
          }

          &:hover:not(.active) {
            color: #666;
          }
        }
      }

      .auth-form {
        width: 100%;
        max-width: 320px;

        :deep(.el-form-item) {
          margin-bottom: 1.5rem;

          // 添加忘记密码链接的样式
          .forgot-password {
            text-align: right;
            margin-top: 8px;
            font-size: 14px;
            
            .el-link {
              font-size: 13px;
              padding: 4px 0;
              transition: all 0.3s ease;
              
              &:hover {
                opacity: 0.8;
                transform: translateX(2px);
              }
            }
          }
        }

        :deep(.el-form-item) {
          margin-bottom: 1.5rem;
        }

        :deep(.el-input__wrapper) {
          background-color: #f8f9fa;
          padding: 0 1rem;
          box-shadow: none;
          border: 1px solid #e8e8e8;

          &.is-focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
          }

          .el-input-group__append {
            padding: 0;
            background: transparent;
            border: none;
            
            .forgot-link {
              padding: 0 12px;
              font-size: 13px;
              transition: all 0.3s ease;
              
              &:hover {
                opacity: 0.8;
                transform: translateX(2px);
              }
            }
          }
        }
        .email-inp {
          :deep(.el-input__wrapper) {
            padding-right: 4px;
          }
        }
        :deep(.el-input__inner),
        :deep(.el-select) {
          height: 42px;
          font-size: 1rem;
        }
        :deep(.el-select__wrapper) {
          height: 100%;
          padding: 4px 16px;
          background-color: #f8f9fa;
        }
        :deep(.el-input__prefix),
        :deep(.el-select__prefix) {
          margin-right: 0.5rem;
        }
        .submit-btn {
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 300px;
          height: 52px;
          gap: 10px;
          padding: 0 10px;
          color: white;
          text-shadow: 2px 2px rgb(116, 116, 116);
          text-transform: uppercase;
          cursor: pointer;
          border: solid 2px #fff;
          letter-spacing: 1px;
          font-weight: 600;
          font-size: 17px;
          background: linear-gradient(
            to right,
            var(--el-color-primary),
            rgb(25, 123, 228)
          );
          border-radius: 50px;
          position: relative;
          overflow: hidden;
          transition: all 0.5s ease;
          &:active {
            transform: scale(0.9);
            transition: all 100ms ease;
          }
          &:hover {
            .now {
              transform: translateX(130px);
              transition-delay: 300ms;
            }
            .play {
              transform: translateX(400%);
              transition-delay: 300ms;
            }
          }
          .play {
            transition: all 0.5s ease;
            transition-delay: 300ms;
          }
          .now {
            position: absolute;
            left: 0;
            transform: translateX(-100%);
            transition: all 0.5s ease;
            z-index: 2;
          }
        }
        .form-options {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;

          :deep(.el-checkbox__label) {
            color: #666;
          }

          .el-button {
            padding: 0;
            height: auto;

            &:hover {
              opacity: 0.8;
            }
          }
        }
        .privacy-agreement {
          margin-bottom: 1.5rem; // 与其他项保持一致的底部边距
          :deep(.el-form-item__content) {
            line-height: normal; // 修正复选框垂直对齐
          }
          :deep(.el-checkbox__label) {
            font-size: 13px;
            color: #666;
          }
          a {
            color: var(--el-color-primary);
            text-decoration: none;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }

  .loading-indicator {
    display: none;
  }

  .announcement-image,
  .auth-image {
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .copyright {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #ccc;
    line-height: 16px;
    text-align: center;
    cursor: default;
    .text {
      position: relative;
      display: flex;
      align-items: center;
      .iconfont {
        margin-right: 6px;
      }
      &::before {
        content: "";
        position: absolute;
        top: 16px;
        left: -100px;
        display: inline-block;
        width: 80px;
        height: 1px;
        background-color: #ccc;
      }
      &::after {
        content: "";
        position: absolute;
        top: 16px;
        right: -100px;
        display: inline-block;
        width: 80px;
        height: 1px;
        background-color: #ccc;
      }
    }
  }

  .history-users {
    .history-item {
      padding: 8px 12px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        background-color: #f5f7fa;
        color: var(--el-color-primary);
      }
    }
  }

  .forgot-password {
    text-align: right;
    margin: -10px 0 10px;
    
    .el-link {
      font-size: 13px;
      padding: 4px 0;
      transition: all 0.3s ease;
      
      &:hover {
        opacity: 0.8;
        transform: translateX(2px);
      }
    }
  }

  .forgot-password-dialog {
    :deep(.el-dialog__body) {
      padding: 20px 40px;
    }

    :deep(.el-form-item) {
      margin-bottom: 24px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateX(4px);
      }

      .el-input__wrapper {
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        transition: all 0.3s ease;
        border-radius: 8px;

        &:hover {
          box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        &.is-focus {
          box-shadow: 0 4px 16px rgba(var(--el-color-primary-rgb), 0.15);
        }
      }

      .el-input-group__append {
        padding: 0;
        background: var(--el-input-bg-color, #fff);
        border: 1px solid var(--el-border-color);
        border-left: 1px solid var(--el-border-color);
        margin-left: -1px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        
        .el-button {
          height: 40px;
          min-width: 100px;
          padding: 0 20px;
          border: none;
          border-radius: 8px;
          transition: all 0.3s ease;
          margin: 0;
          
          &:hover {
            transform: translateX(2px);
          }
          
          &:disabled {
            background-color: var(--el-button-disabled-bg-color);
            border-color: var(--el-button-disabled-border-color);
          }
        }
      }
    }
  }
}

/* 注册模式下的面板样式 */
.login-panel.register-panel {
  height: auto; /* 允许自动调整高度 */
}

/* 调整图形验证码区域的位置 */
.graph-captcha-item {
  position: relative;
  margin-bottom: 15px; /* 为按钮腾出更多空间 */
}

/* 确保验证码容器在注册面板中有足够空间 */
.register-panel .graph-captcha {
  position: relative; /* 确保悬浮效果正确定位 */
}

// 自定义滚动条样式
:deep(.el-scrollbar__bar) {
  &.is-horizontal {
    display: none;
  }

  &.is-vertical {
    width: 6px;

    .el-scrollbar__thumb {
      background-color: rgba(144, 147, 153, 0.3);

      &:hover {
        background-color: rgba(144, 147, 153, 0.5);
      }
    }
  }
}

// 添加动画关键帧
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-15px) scale(1.05);
  }
}

// 添加动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 直接控制图形验证码和输入框布局 */
.captcha-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.captcha-input {
  flex: 1;
  margin-right: 12px; /* 与验证码之间的间距 */
  max-width: calc(100% - 112px); /* 给验证码留出空间 */
}

.graph-captcha {
  width: 100px;
  height: 40px;
  min-width: 100px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c0c4cc;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.graph-captcha img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.loading-captcha {
  font-size: 12px;
  color: #999;
}

/* 调整悬浮效果为子元素 */
.graph-captcha:hover::after {
  content: '点击刷新';
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  border-radius: 3px;
}

/* 修改对话框中的图形验证码容器布局 */
.forgot-password-dialog .captcha-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  height: 40px;
}

/* 调整对话框中的图形验证码输入框宽度 */
.forgot-password-dialog .captcha-container .el-input {
  width: calc(100% - 112px); /* 减去图形码宽度和间距 */
  flex: initial; /* 覆盖之前的flex: 1设置 */
}

/* 确保对话框中的图形验证码位置准确 */
.forgot-password-dialog .graph-captcha {
  position: relative;
  width: 100px;
  height: 40px;
  min-width: 100px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

/* 对话框中的悬浮效果 */
.forgot-password-dialog .graph-captcha:hover::after {
  content: '点击刷新';
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  width: 100%; /* 确保覆盖整个区域 */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
}

/* 确保图片完全填充容器 */
.forgot-password-dialog .graph-captcha img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 验证码容器样式 */
.captcha-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* 验证码输入框样式 */
.captcha-input {
  flex: 1;
  margin-right: 10px;
}

/* 获取验证码按钮 */
.get-code-btn-container {
  display: flex;
  align-items: center;
}

.get-code-btn {
  flex-shrink: 0;
  min-width: 140px;
  height: 40px;
}

/* 重置验证码按钮 */
.reset-code-btn {
  flex-shrink: 0;
  min-width: 140px;
  height: 40px;
}

/* 二维码容器样式 */
.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 0 0px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

/* 二维码图片样式 */
.register-qrcode {
  width: 180px;
  height: 180px;
  object-fit: contain;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* 二维码提示文字样式 */
.qrcode-tip {
  font-size: 14px;
  color: #94a3b8;
  text-align: center;
  margin: 0;
  margin-bottom: 12px;
}

/* 已激活按钮样式 */
.activated-btn {
  width: 140px;
  margin-top: 8px;
  font-weight: bold;
}

/* 添加淡入淡出过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 注册表单步骤样式 */
.register-form {
  width: 100%;
  max-width: 400px;
}

/* 步骤指示器 */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  padding: 0 20px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  margin-bottom: 8px;
}

.step-label {
  font-size: 12px;
  color: #9ca3af;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.step-item.active .step-number {
  background: #3b82f6;
  color: white;
}

.step-item.active .step-label {
  color: #3b82f6;
  font-weight: 500;
}

.step-item.completed .step-number {
  background: #10b981;
  color: white;
}

.step-item.completed .step-label {
  color: #10b981;
}

.step-line {
  width: 60px;
  height: 2px;
  background: #e5e7eb;
  margin: 0 16px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.step-line.active {
  background: #10b981;
}

/* 步骤内容 */
.step-content {
  min-height: 300px;
}

.step-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
}

/* 步骤信息 */
.step-info {
  text-align: center;
  // margin-bottom: 24px;
}

.info-icon {
  font-size: 48px;
  color: #3b82f6;
  margin-bottom: 16px;
}

.step-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.step-info p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* 令牌部分 */
.token-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.token-input {
  width: 100%;
}

.get-token-btn {
  width: 100%;
  height: 48px;
  font-weight: 600;
  border-radius: 8px;
}

/* 步骤操作按钮 */
.step-actions {
  display: flex;
  gap: 12px;
  // margin-top: 10px;
}

.step-actions .el-button {
  flex: 1;
  height: 48px;
  font-weight: 600;
  border-radius: 8px;
}

/* 激活内容 */
.activation-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.qr-section {
  text-align: center;
}

.qr-section-horizontal {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  justify-content: center;
}

.qr-info {
  text-align: center;
  // margin-bottom: 24px;
}

.qr-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.qr-info p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.qr-container {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.qr-code {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qr-tips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  flex: 1;
  max-width: 200px;
}

.agreement-section {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid #e5e7eb;
  margin-top: 20px;
}

.agreement-section .el-form-item {
  margin-bottom: 0;
}

.agreement-section .el-checkbox {
  font-size: 14px;
}

.agreement-section a {
  color: #3b82f6;
  text-decoration: none;
}

.agreement-section a:hover {
  text-decoration: underline;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}

.tip-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.tip-item span:last-child {
  font-size: 14px;
  color: #374151;
}

.agreement-section {
  padding: 16px;
  background: rgba(59, 130, 246, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .step-indicator {
    padding: 0 10px;
  }
  
  .step-line {
    width: 40px;
    margin: 0 8px;
    margin-bottom: 20px;
  }
  
  .step-label {
    font-size: 11px;
  }
  
  .qr-section-horizontal {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .qr-code {
    width: 140px;
    height: 140px;
  }
  
  .qr-tips {
    max-width: 100%;
    text-align: center;
  }
}
</style>
